<template>
  <div class="pub-audio">
    <img :src="url" alt="" class="pub-audio-cover" />
    <div class="pub-flex-centerY opear-footer pub-font-12 pub-color-96">
      <div class="pub-flex-centerY">
        <head-stack>
          <template #right>
            &nbsp;<van-image
              width="16px"
              height="16px"
              :src="require('@/assets/image/star-16-15.png')"
              class="pub-icon"
            />&nbsp;999&nbsp;人收藏
          </template>
        </head-stack>
      </div>
      <div class="pub-flex-centerY" style="margin-top: 10px">
        <span class="pub-flex-centerY">
          <van-image width="13px" height="12px" :src="require('@/assets/image/message-14-13.png')" class="pub-icon" />
          99</span
        >
        <span class="pub-flex-centerY">
          <van-image
            width="13px"
            height="12px"
            :src="require('@/assets/image/forwarding-14-13.png')"
            class="pub-icon"
          />
          分享
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import HeadStack from './headStack.vue'
export default {
  name: 'TopicAudio',
  setup() {
    const url = ref('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png')
    return {
      url
    }
  },
  components: {
    HeadStack
  }
}
</script>

<style scoped lang='scss'>
@import '../style.scss';

.pub-audio {
  .pub-audio-cover {
    width: 100%;
    height: 200px;
    border-radius: 4px;
  }
  .opear-footer {
    justify-content: space-between;
    & > div:last-child {
      & > span {
        justify-content: flex-end;
      }
    }
  }
  .pub-flex-centerY {
    flex-grow: 1;
  }
  .pub-icon {
    margin-right: 4px;
  }
}
</style>